<template>
  <div class="small-filter-wrap">
    <div class="left-wrap">
      <div class="filterItem" @click="handleIssue">
        发布时间
        <div class="icon">
          <a-icon
            type="caret-up"
            @click="(e) => issueTime(e, 'asc')"
            :style="caretUp"
          />
          <a-icon
            type="caret-down"
            @click="(e) => issueTime(e, 'desc')"
            :style="caretDown"
          />
        </div>
      </div>
      <div class="filterItem" @click="handleView">
        浏览量
        <div class="icon">
          <a-icon
            type="caret-up"
            @click="(e) => viewCount(e, 'asc')"
            :style="viewUp"
          />
          <a-icon
            type="caret-down"
            @click="(e) => viewCount(e, 'desc')"
            :style="viewDown"
          />
        </div>
      </div>
    </div>
    <div class="right-wrap">
      <InputSearch
        :keywords="keywords"
        placeholder="输入搜索内容"
        btnTitle="搜索"
        @search="handleSearch"
      />
    </div>
  </div>
</template>

<script>
import InputSearch from '@/components/InputSearch/index.vue'

export default {
  data() {
    return {
      flag1: true,
      flag2: true,
      caretUp: {
        color: ''
      },
      caretDown: {
        color: ''
      },
      viewUp: {
        color: ''
      },
      viewDown: {
        color: ''
      }
    }
  },
  props: {
    keywords: {
      type: String,
      default: 'keywords'
    }
  },
  components: {
    InputSearch
  },
  methods: {
    handleIssue() {
      this.$emit('handleDefault')
      this.caretUp.color = ''
      this.caretDown.color = ''
      this.viewUp.color = ''
      this.viewDown.color = ''
    },
    handleView() {
      this.$emit('handleDefault')
      this.viewUp.color = ''
      this.viewDown.color = ''
      this.caretUp.color = ''
      this.caretDown.color = ''
      // if (this.flag2) {
      //   this.$emit('viewCount', 'asc')
      //   this.caretUp.color = ''
      //   this.caretDown.color = ''
      //   this.viewUp.color = '#4caffd'
      //   this.viewDown.color = ''
      //   this.flag2 = false
      //   return
      // }
      // if (!this.flag2) {
      //   this.$emit('viewCount', 'desc')
      //   this.caretUp.color = ''
      //   this.caretDown.color = ''
      //   this.viewDown.color = '#4caffd'
      //   this.viewUp.color = ''
      //   this.flag2 = true
      // }
    },
    handleSearch(res) {
      this.$emit('search', res)
      this.$emit('handleDefault')
      this.caretUp.color = ''
      this.caretDown.color = ''
      this.viewUp.color = ''
      this.viewDown.color = ''
    },
    issueTime(e, status) {
      e.stopPropagation()
      if (this.caretUp.color === '#2279D2' && status === 'asc') {
        this.$emit('handleDefault')
        this.caretUp.color = ''
        this.caretDown.color = ''
        this.viewUp.color = ''
        this.viewDown.color = ''
        return
      }
      if (this.caretDown.color === '#2279D2' && status === 'desc') {
        this.$emit('handleDefault')
        this.caretUp.color = ''
        this.caretDown.color = ''
        this.viewUp.color = ''
        this.viewDown.color = ''
        return
      }
      if (status === 'asc') {
        this.$emit('issueTime', status)
        this.viewUp.color = ''
        this.viewDown.color = ''
        this.caretUp.color = '#2279D2'
        this.caretDown.color = ''
        return
      }
      if (status === 'desc') {
        e.stopPropagation()
        this.$emit('issueTime', status)
        this.viewUp.color = ''
        this.viewDown.color = ''
        this.caretDown.color = '#2279D2'
        this.caretUp.color = ''
      }
    },
    viewCount(e, status) {
      e.stopPropagation()
      if (this.viewUp.color === '#2279D2' && status === 'asc') {
        this.$emit('handleDefault')
        this.caretUp.color = ''
        this.caretDown.color = ''
        this.viewUp.color = ''
        this.viewDown.color = ''
        return
      }
      if (this.viewDown.color === '#2279D2' && status === 'desc') {
        this.$emit('handleDefault')
        this.caretUp.color = ''
        this.caretDown.color = ''
        this.viewUp.color = ''
        this.viewDown.color = ''
        return
      }
      if (status === 'asc') {
        this.$emit('viewCount', status)
        this.caretUp.color = ''
        this.caretDown.color = ''
        this.viewUp.color = '#2279D2'
        this.viewDown.color = ''
        return
      }
      if (status === 'desc') {
        e.stopPropagation()
        this.$emit('viewCount', status)
        this.caretUp.color = ''
        this.caretDown.color = ''
        this.viewDown.color = '#2279D2'
        this.viewUp.color = ''
      }
    }
  }
}
</script>
